import React, { useState, useMemo, useCallback,useRef } from 'react'
import { Button } from "antd"
import style from "../assets/styles/register.module.less"

export default function Register() {
    const [tasks, setTasks] = useState([
        { id: 1, title: "Vue", state: true },
        { id: 2, title: "React", state: false },
        { id: 3, title: "TypeScript", state: false },
    ])
    const [status, setStatus] = useState("all")
    const [count, setCount] = useState(0)
    const inputElement = useRef()

    // const filterData = useMemo(() => {
    //     switch (status) {
    //         case "all": return tasks;
    //         case "done": return tasks.filter(item => item.state);
    //         case "undone": return tasks.filter(item => !item.state)
    //     }
    // }, [status])

    const filterData = useCallback(() => {
        switch (status) {
            case "all": return tasks;
            case "done": return tasks.filter(item => item.state);
            case "undone": return tasks.filter(item => !item.state)
        }
    }, [status])


    const changeState = (value) => {
        console.log(value);
        setStatus(value)
    }
    const updateLiState = (id) => {
        const newTasks = [...tasks]
        console.log(newTasks);
        const index = newTasks.findIndex(item => item.id == id)
        newTasks[index].state = !newTasks[index].state

        setTasks(newTasks)
    }
    const addTask = () => {
        // const value = Register.inputElement.value
        const value = inputElement.current.value;
        let obj = {
            id:4,
            title:value,
            state:false
        }
        tasks.push(obj)
        setTasks([...tasks])

        
    }

    return (
        <div>
            {/* <input type="text" ref={element=>Register.inputElement = element} /> */}
            <input type="text" ref={inputElement} />
            <Button onClick={addTask}>添加</Button>
            <ul>
                {filterData().map(item => {
                    return <li onDoubleClick={() => updateLiState(item.id)} className={item.state ? style.done : null} key={item.id}>{item.title}</li>
                })}
            </ul>
            {/* <p>{filterData}</p> */}
            {/* <p>{count}</p> */}
            <button onClick={() => setCount(100)}>修改</button>
            <Button onClick={() => changeState("all")} type='default'>全部</Button>
            <Button onClick={() => changeState("done")} type='primary'>已完成</Button>
            <Button onClick={() => changeState("undone")} type='dashed'>未完成</Button>
        </div>
    )
}
